<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="预约看房"></xk-header>
		<scroll-view class="data-list" scroll-x="true">
			<view :class="dataList.length===1 ? 'data-item data-item-one' : 'data-item'"
				v-for="(item, index) of dataList" :key="index">
				<view class="item-top">
					<view>物业编号: {{item.property_code}}</view>
					<image mode="aspectFill" class="del-img" :src="(imgUrl+'/wx/close.png')" v-if="dataList.length > 1"
						@click="onDelete(item)" />
				</view>
				<view class="item-middel">
					<image v-if="item.property_image" mode="aspectFill" class="img"
						:src="item.property_image | formatImgPath('260', '195')" />
					<image v-else mode="aspectFill" class="img" :src="(imgUrl+'/wx/default_img.jpg')" />
					<view class="info">
						<view>
							<view class="name">{{item.tag_name || "-"}}</view>
							<view class="desc">{{item.real_area}}㎡/{{item.floor_area}}㎡</view>
						</view>
						<!-- <view class="desc">总面积：</view> -->
						<view>
							<view v-if="item.pricing_amount" class="amount">
								<text></text>{{(item.pricing_amount * item.floor_area || "") | formatMoneyNo00}}
								<text>元/月</text></view>
							<view v-else class="amount">月租面议</view>
							<view v-if="item.pricing_amount" class="desc">
								{{(item.pricing_amount || "") | formatMoneyNo00}}元/㎡</view>
						</view>
					</view>
				</view>
				<view class="location-view">
					<image mode="aspectFill" class="dingwei" :src="(imgUrl+'/wx/dingwei.png')" />
					<view class="address">{{item.building}}{{item.storey}}</view>
				</view>
			</view>
		</scroll-view>

		<view class="list">
			<view class="content-title">
				<view class="title-icon"></view>申请信息
			</view>
			<view class="list-item">
				<view>申请人:</view>
				<input :disabled="userName" class="title1" type="text" v-model="userName" placeholder="请输入申请人姓名"
					placeholder-style="color:#ccc" />
			</view>
			<view class="list-item">
				<view>联系号码:</view>
				<input class="title1" type="number" v-model="phoneNo" placeholder="请输入申请人联系号码"
					placeholder-style="color:#ccc" />
			</view>
			<view class="list-item">
				<view>单位名称:</view>
				<input :disabled="compayName" class="title1" type="text" v-model="compayName" placeholder="请输入申请人单位名称"
					placeholder-style="color:#ccc" />
			</view>
			<view class="list-item">
				<view>租赁用途:</view>
				<input class="title1" type="text" v-model="leasePurpose" placeholder="请输入租赁用途"
					placeholder-style="color:#ccc" />
			</view>
			<!-- 			<ApptTimePicker class="list-item" @change="startTimeChange" :selTimes="['上午', '下午']" title="查看物业时间段">
				<view class="picker-inner">
					<view>查看物业时间段:</view>
					<view :class="startTime ? 'right-title1' : 'right-title1 right-title1-empty'">{{startTime ? startTime : "请选择"}}</view>
					<image mode="aspectFill" class="jiantou" :src="(imgUrl+'/wx/jiantou.png')"/>
				</view>
			</ApptTimePicker> -->
			<view class="list-item">
				<view class="picker-inner">
					<view>查看物业时间段:</view>
					<view @click="showstartTime = true"
						:class="startTime ? 'right-title1' : 'right-title1 right-title1-empty'">
						{{startTime ? startTime : "请选择"}}</view>
					<image mode="aspectFill" class="jiantou" :src="(imgUrl+'/wx/jiantou.png')" />
				</view>
			</view>
			<u-datetime-picker ref="datetimePicker" :show="showstartTime" v-model="modelstartTime" mode="datetime"
				:closeOnClickOverlay="true" @change="startTimeChange" @close="showstartTime = false"
				@confirm="confirmstartTime" @cancel='showstartTime = false'></u-datetime-picker>

			<view class="list-item desc-item">
				<view>备注:</view>
				<textarea type="text" v-model="remark" placeholder="在此输入您的备注内容" placeholder-style="color:#ccc" />
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn-sty2 btn" @click.stop="joinAppt()">{{isInShoppingCart ? '已入看房购物车' : '加入看房购物车'}}
			</view>
			<view class="common-btn " style="flex:1;" @click.stop="makeAppt()">立即预约</view>
		</view>
		<!-- <shopping-cart v-if="isTenant=='TENANT' || isTenant=='NOT_YET_TENANT'|| isTenant=='Notloggedin'" ref="shoppingCart" class="shopping-cart" :style="{ top: cartTop + 'px' }" /> -->
		<view class="common-zw"></view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				imgUrl: this.$config.BASE_imgUrl,
				// isTenant: this.$util.isTenant(), //TENANT租户NOT_YET_TENANT不是租户Notloggedin未登录Admin管理员
				eventName: "",
				isListIn: "0",
				index: 0,
				dataListTemp: [],
				dataList: [],
				showstartTime: false,
				modelstartTime: moment().format('YYYY-MM-DD HH:mm:ss'),
				userName: this.$util.getStorage("loginInfo").name, // 联系人
				phoneNo: this.$util.getStorage("loginInfo").phoneNo, // 联系系手机
				compayName: "", // 公司名称
				leasePurpose: "", // 用途
				startTime: "",
				remark: "", // 备注
				isInShoppingCart: false,
				notNull: {
					userName: '请输入申请人',
					phoneNo: '请输入联系号码',
					// compayName: '请输入单位名称',
					leasePurpose: "请输入租赁用途",
					startTime: "先选择查看物业时间段"
				}
			};
		},
		// onShow() {
		// 	if (this.$refs.shoppingCart) {
		// 		this.$refs.shoppingCart.refresh()
		// 	}
		// },
		onLoad(options) {

			if (options && options.eventName) {
				this.eventName = options.eventName
			}
			if (options && options.isListIn) {
				this.isListIn = options.isListIn
			}
			if (options && options.data) {
				this.dataList.push(JSON.parse(options.data))
			}
			if (options && options.dataList) {
				let dataListTemp = JSON.parse(options.dataList)
				console.log('dataListTemp=====', dataListTemp)
				for (let item of dataListTemp) {
					if (item.pi_looking_property_dets) {
						for (let det of item.pi_looking_property_dets) {
							this.dataList.push(det)
						}
					} else {
						this.dataList.push(item)
					}
				}
				this.dataListTemp = JSON.parse(options.dataList)
			}

			console.warn("预约列表：", this.dataList)
			let temp = true;
			for (let item of this.dataList) {
				temp = (temp && this.$util.checkIsInShoppingCart(item.property_id))
			}
			this.isInShoppingCart = temp
			this.initInfo()
		},
		methods: {
			confirmstartTime(e) {
				this.startTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
				this.showstartTime = false
			},
			startTimeChange(e) {
				this.startTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
			},
			joinAppt() {
				console.log('2222======')
				// if (!this.checkIsLogin()) return;

				// if (this.$util.checkIsInShoppingCart(this.data.property_id)) {
				// 	this.$util.toast("已加入看房购物车");
				// }

				// if (this.completeLookingRoomList.indexOf(this.data.property_id) >= 0 ) {
				// 	this.$util.toast("已完成看房");
				// 	return
				// }
				// if (this.unDoneLookingRoomList.indexOf(this.data.property_id) >= 0 ) {
				// 	this.$util.toast("已加入预约列表，待看房");
				// 	return
				// }

				if (!this.isInShoppingCart) {
					for (let item of this.dataList) {
						if (!this.$util.checkIsInShoppingCart(item.property_id)) {
							this.$util.addShoppingCart(item)
						}
					}
					this.isInShoppingCart = true
					this.$util.toast("已加入看房购物车");
				}
			},
			initInfo() {
				// 查询公司信息
				this.$api.mySelf_getMyCompany().then(res => {
					console.warn("公司信息：", res)
					this.compayName = res.company_name
				})
			},
			clickTab(index) {
				this.tabIndex = index
			},
			listInfoChange(e) {
				this.tabIndex = parseInt(e.target.current)
			},
			startTimeChange(value) {
				console.log('value', value)
				this.startTime = value
			},
			onDelete(item) {
				this.$util.confirm({
					content: "确定要删除？"
				}).then(isConfirm => {
					if (isConfirm) {
						console.warn("aaa: ", item)
						this.dataList.splice(this.dataList.indexOf(item), 1)
						for (let i = 0; i < this.dataListTemp.length; i++) {
							let itemTemp = this.dataListTemp[i]
							if (itemTemp.pi_looking_property_dets) {
								for (let det of itemTemp.pi_looking_property_dets) {
									if (det.property_code === item.property_code) {
										this.dataListTemp.splice(this.dataList.indexOf(itemTemp), 1)
										i--;
										break;
									}
								}
							}
						}
						console.warn("列表： ", this.dataListTemp)
					}
				})
			},
			makeAppt() {
				for (let item in this.notNull) {
					if (!this[item]) {
						this.$util.toast(this.notNull[item]);
						return;
					}
				}

				if (this.dataList.length <= 0) {
					this.$util.toast("未找到物业信息")
					return
				}

				this.$util.confirm({
					content: "确定要提交预约申请？",
					confirmText: "立即预约"
				}).then(isConfirm => {
					if (isConfirm) {
						uni.requestSubscribeMessage({
							tmplIds: ['1Qj6x_3MNg5fcCzl1rwd41qh3ufRWBSovC1kaq2qQHk'],
							complete: () => {
								let assetsPropertyIds = [];
								for (let item of this.dataList) {
									assetsPropertyIds.push(item.property_id)
								}
								this.$util.post({
									url: "wx/piLookingRoom/apply",
									data: {
										isSubmit: true,
										startTime: this.startTime,
										leasePurpose: this.leasePurpose,
										property_remark: this.remark,
										assetsPropertyIds: assetsPropertyIds
									}
								}).then((res) => {
									console.warn("预约结果：", res);
									this.cancel(assetsPropertyIds)
									uni.redirectTo({
										url: "/pages/estate/make-appt-result?dataList=" +
											JSON.stringify(this.dataList) +
											"&isListIn=" + this.isListIn +
											"&look_id=" + res
									})
								});
							}
						})
					}
				})

			},
			cancel(assetsPropertyIds) {
				this.$util.removeShoppingCart(assetsPropertyIds)

				if (this.eventName) {
					this.$EventBus.$emit(this.eventName, {});
				}

				this.$api.piLookingRoom_getPiLookingRoomList({
					start: 0,
					limit: 49
				}).then(res => {
					console.warn("查询预约看房列表: ", res)
					for (let item of res.unDoneLookingRoomList) {
						if (item.jd_status === "APPLYING") {
							for (let det of item.pi_looking_property_dets) {
								if (assetsPropertyIds.indexOf(det.property_id) >= 0) {
									this.$util.post({
										url: "piLookingRoom/cancel",
										data: {
											look_id: item.look_id
										}
									}).then((res) => {
										if (this.eventName) {
											this.$EventBus.$emit(this.eventName, item);
										}
									});
								}
							}
						}
					}
				})
				// for (let item of this.dataListTemp) {
				// 	this.$util.post({
				// 		url: "piLookingRoom/cancel",
				// 		data: {
				// 			look_id: item.look_id
				// 		}
				// 	}).then((res)=>{
				// 		if (this.eventName) {
				// 			this.$EventBus.$emit(this.eventName, item);
				// 		}
				// 	});
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data-list {
		display: flex;
		flex-direction: row;
		width: 750rpx;
		white-space: nowrap;

		.data-item {
			display: inline-block;
			flex-direction: column;
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx 0rpx 0rpx 30rpx;
			padding: 20rpx;
			width: 550rpx;
			color: #333;
			font-size: 28rpx;
			white-space: normal;

			.item-top {
				display: flex;

				:first-child {
					flex: 1;
				}

				.del-img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.item-middel {
				display: flex;
				margin-top: 10rpx;
				padding: 10rpx 0 20rpx;

				.img {
					width: 200rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}

					.desc {
						font-size: 24rpx;
						color: #999999;
						font-weight: 400;
					}

					.amount {
						font-size: 36rpx;
						color: #FF3737;
						font-weight: 700;

						text {
							font-size: 24rpx;
							color: #FF3737;
							font-weight: 600;
						}
					}
				}
			}

			.location-view {
				display: flex;
				padding-top: 20rpx;
				align-items: flex-start;
				border-top: 1rpx solid #EEEEEE;

				.dingwei {
					width: 30rpx;
					height: 30rpx;
					margin-top: 5rpx;
				}

				.address {
					font-size: 24rpx;
					color: #333;
					margin-left: 10rpx;
				}
			}
		}

		.data-item-one {
			width: 650rpx
		}
	}

	.list {
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		.content-title {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			display: flex;
			align-items: center;
			padding: 32rpx 0rpx;

			.title-icon {
				width: 12rpx;
				height: 40rpx;
				background-color: #2C72FF;
				border-top-right-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
				margin-right: 10rpx;
			}
		}
	
	.list-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			// justify-content: space-between;

			color: #333;
			font-size: 28rpx;
			padding: 35rpx 20rpx;

			// border-bottom: 1rpx #F8F8F8 solid;
			input {
				flex: 1;
			}

			.picker-inner {
				width: 650rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.title1 {
				color: #333;
				margin-left: 20rpx;
			}

			.right-title1 {
				flex: 1;
				text-align: right;
				color: #333;
			}

			.right-title1-empty {
				color: #ccc;
			}

			.jiantou {
				width: 14rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}

		// .list-item:last-child{
		// 	border-bottom: 0;
		// }
		.desc-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			textarea {
				margin-top: 20rpx;
				padding: 16rpx 20rpx;
				// flex: 1;
				box-sizing: border-box;
				width: 100%;
				height: 120rpx;
				background-color: #F9F9F9;
			}
		}

		.item-border {
			border-bottom: 1rpx #F8F8F8 solid;
		}
	}

	.bottom-view {
		background-color: #FFFFFF;
		position: fixed;
		z-index: 99;
		width: 750rpx;
		padding-bottom: var(--window-bottom);
		bottom: 0;
	}

	.btn-view {
		display: flex;
		justify-content: space-around;
		flex: 1;

		.btn {
			padding: 0rpx 50rpx;
		}
	}
</style>
